<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ng-app="indexApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link th:href="@{/bootstrap/dist/css/bootstrap.css}" rel="stylesheet">
    <!--<link th:href="@{/bootstrap/dist/css/bootstrap-theme.css}" rel="stylesheet">-->
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-2.1.4.js}"></script>
    <script th:src="@{/bootstrap/dist/js/bootstrap.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <title>图谱可视化</title>
</head>
<body>
<div class="container-fluid" style="margin-top: 50px">
    <div class="row">
        <div class="form-group col-md-3">
            <input type="text" class="form-control input-sm" placeholder="姓名" id="name" value="">
        </div>
        <div class="form-group col-md-3">
            <input type="text" class="form-control input-sm" placeholder="最大显示层级" id="depth" value="3">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success btn-sm btn-block" id="viewOne">查看关系图谱</button>
        </div>
    </div>
    <!--
    <button id="viewAll">查看所有</button>
    -->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">关系图谱</div>
                <div class="panel-body">
                    <div id="graph" style="width: 100%;height:600px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">实体画像</div>
                <div class="panel-body">
                    <div id="entityDetail" style="width: 100%;height:600px;">
                        <div id="detail">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
    </div>
</div>
<script type="text/javascript">
    $(function () {

        $.ajax({
            url: "visualize/get-value-randomly",
            type: "GET",
            cache: false,
            success: function (data) {
                $("#name").val(data.value);
            }

        });

        var myChart = echarts.init(document.getElementById('graph'));

        var entityDetailChart = echarts.init(document.getElementById('entityDetail'));

        myChart.on('click', function (param) {
            console.log(param);//重要的参数都在这里！
            var value = param.data.name;
            var depth = $("#depth").val();
            if (depth < 2) {
                depth = 2;
            }

            getVisualizeData("visualize/one", {"name": value, "depth": depth});


            if (param.dataType == "node") {
                getDetail(value, depth);
            }

        });

        /*
                myChart.dispatchAction({
                    type: 'showTip'
                });

        */
        $("#viewAll").on("click", function () {
            getVisualizeData("visualize/all", {})
        });


        $("#viewOne").on("click", function () {
            if ($("#depth").val() < 2) {
                alert("不能小于2");
            } else {
                getVisualizeData("visualize/one", {"name": $("#name").val(), "depth": $("#depth").val()});
                getDetail($("#name").val(), $("#depth").val());
            }
        });

        function getDetail(value, depth) {
            $.ajax({
                type: "POST",
                url: "visualize/detail",
                cache: false,
                data: {"value": value},
                dataType: 'json',
                success: function (data) {
                    var str = "";
                    for (var key in data) {
                        str += key + ": " + data[key] + "<br>";
                    }
                    $("#detail").empty().append(str);
                    $("#name").val(value);
                    $("#depth").val(depth);

                    refreshDetailChart(data);
                }
            });
        }

        function getVisualizeData(url, name) {
            $.ajax({
                type: "POST",
                url: url, //"visualize",
                cache: false,
                data: name,
                dataType: 'json',
                success: function (data) {
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: ''
                        },
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 12
                                },
                            }
                        },
                        /*                        tooltip: {
                                                    triggerOn: "click",
                                                    formatter:function(params,ticket,callback){
                                                        setTimeout(function (){
                                                            // 仅为了模拟异步回调

                                                        }, 800);
                                                        return $("#detail").html();
                                                    }

                                                },
                         */
                        series: [
                            {
                                type: 'graph',
                                layout: 'force',
                                symbolSize: 45,
                                focusNodeAdjacency: true,
                                roam: true,
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            fontSize: 12
                                        },
                                    }
                                },
                                force: {
                                    repulsion: 500
                                },
                                draggable: true,
                                edgeSymbol: ['circle', 'arrow'],
                                edgeSymbolSize: [4, 10],
                                edgeLabel: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            fontSize: 10
                                        },
                                        formatter: "{c}"
                                    }
                                },
                                categories: [{
                                    name: 'center',
                                    itemStyle: {
                                        normal: {
                                            color: "#ff5451",
                                        }
                                    }
                                }],
                                itemStyle: {
                                    normal: {
                                        color: "#4592FF",
                                    }
                                },
                                data: data.nameData,
                                links: data.linkData,
                                lineStyle: {
                                    normal: {
                                        opacity: 0.9,
                                        width: 1,
                                        curveness: 0.1
                                    }
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }
            });
        }

        function refreshDetailChart(data) {
            var symbols = [
//                "path://M90.652,31H90C90,31,90.179,31.368,90.652,31z M152,38c-0.584-3.417-1.834-9.667-3-11c0.916,0.083,3-1,3-1s-1.084-1.333-3-2s-7.334-7.333-10-10s-8-4-8-4s0.311-0.771,1-1c0.802-0.268,2,0,2,0s-1.584-1-4-1c-1.609,0-2.847,1.771-3.495,2.957C125.859,9.718,124.62,7.727,123,7c-2.416-1.083-3-1-3-1s1.75,2.083,2,3c0,0-1.5-1.167-5-1c-1.497,0.071-2.445,0.265-3.04,0.462C113.164,8.727,113,9,113,9h1c0,0-4.333,0.417-8,2s-9,6-9,6h2c0,0-3.167,4.083-4,5c-2.167,0.333-2,0-2,0s-0.417,0.417,1,1s1,1,1,1s-1.667,2.333-3,5c-0.6,1.2-1.037,1.758-1.348,2H92c0,0-0.004,1.607-1,5c-0.714,2.434-0.287,8.385,0,9c0,0,0.75-4.083,1-3s-0.167,1.583,0,4s1,3,1,3l1-2c0,0,0.917,4.5,1,6s0,2,0,2l1-2v1l0.569-0.854c0.529,0.498,1.135,0.37,1.635,0.552c-1.379,3.658,1.457,7.579,3.234,10.255c1.909,2.873,3.84,2.011,3.84,2.011l-0.079-0.541c0.178,0.653,0.354,1.271,0.523,1.804c2.219,6.977,3.079,8.363,7.593,12.147c3.386,2.838,3.315,4.626,8.783,4.626c5.669,0,5.154-1.94,8.896-4.974c3.35-2.716,5.586-4.172,7.426-10.634c0.188-0.662,0.404-1.426,0.631-2.23c0.561,0.123,2.009,0.171,3.472-2.062c1.644-2.51,4.214-6.127,3.333-9.58c0.46-0.254,1.039-0.327,1.322-1.365c0.053-0.192,0.109-0.4,0.164-0.602C148.352,51.021,150,47,150,47v1.754c0.115-0.262,0.385-0.763,1-1.754c1.5-2.417,0-7,0-7l1,2C152,42,152.584,41.417,152,38z M122.072,9.264C122.137,9.5,122.109,9.402,122.072,9.264L122.072,9.264zM159.268,211.039c-0.441-4.467-1.216-8.439-1.735-10.794c0.19-0.086,0.356-0.169,0.468-0.245c0.864-0.588,0-4,0-4s-9.166,2.917-33.5,4.25C100.167,201.583,87,195,87,195s-0.667,1.667-1,3c-0.054,0.214,0.171,0.455,0.607,0.713c-0.681,3.063-2.089,9.854-2.922,17.071c-1.336,11.574-0.92,17.69-0.185,18.216c2.333,1.667,36.167,4.75,37.166,2.75c1-2,1-2,1-2l2.043-0.167L124,235.75c0,0,0.666,3,12,2s24.804-2.678,24.75-5.75C160.689,228.563,160.285,221.326,159.268,211.039zM154.25,321.191c-1.844-5.838-0.922-16.54,0-20.432c3.686-15.567,5.527-32.976,5.527-46.597c0-6.154-0.268-13.261-0.674-20.391c-3.922,1.98-14.174,3.189-23.104,3.978c-8.324,0.734-10.892-0.688-11.67-1.496c1.333,19.9,4.12,30.385,4.12,37.155c0,21.404,5.528,44.863,5.528,53.619c0,8.757-6.084,21.297-2.741,37.161c3.686,8.757,2.741,49.075,2.741,50.048c-0.922,6.811-2.764,8.757-2.764,10.703c0,1.945,2.764,4.864,0.921,7.783s0,7.783,1.843,9.729c1.843,1.945,5.528-1.946,13.82-0.974c8.293,0.974,5.529-3.892,5.529-3.892c-3.686-0.973-5.529-5.837-5.529-5.837s0.922-6.811,0-8.757c-2.764-8.757,2.766-51.021,4.607-55.886C157.936,354.46,156.092,328.002,154.25,321.191z M84.857,234.48c-0.384,6.892-0.635,13.732-0.635,19.683c0,13.621,1.843,31.029,5.529,46.597c0.921,3.892,1.843,14.594,0,20.432c-1.843,6.811-3.686,33.269,1.843,45.917c1.843,4.864,7.371,47.129,4.607,55.886c-0.921,1.946,0,8.757,0,8.757s-1.843,4.864-5.528,5.837c0,0-2.765,4.865,5.528,3.892c8.292-0.973,11.978,2.919,13.821,0.974c1.843-1.946,3.686-6.811,1.843-9.729c-1.843-2.919,0.921-5.838,0.921-7.783c0-1.946-1.843-3.893-2.765-10.703c0-0.973-0.944-41.291,2.742-50.048c1.843-17.364-2.742-28.404-2.742-37.161c0-8.756,5.529-32.215,5.529-53.619c0-6.662,2.696-16.941,4.052-36.231C114.286,238.093,90.977,236.009,84.857,234.48zM88.01,126.492c0,0,0.01,0.076,0.023,0.171C88.019,126.561,88.01,126.492,88.01,126.492z M87.75,94.917c-0.019-0.057-0.071-0.157-0.149-0.29c1.097-0.092-2.202-0.059-5.199,0.948c-4.025,1.417-8.266,5.413-11.037,12.738c-1.035,2.736-1.51,5.936-1.761,9.639c0,2.919-0.023,6.811-1.866,13.621c-1.843,3.892-5.529,15.567-6.45,24.323c-0.921,3.892-4.607,11.676-5.528,15.567c-0.921,2.919-7.19,29.682-10.778,52.059c0,3.892-7.395,7.783-8.316,9.729s-2.921,7.507-5.186,10.257c-0.319,0.387-0.823,2.312,0.518,2.218c1.122-0.079,3.91-1.945,5.589-3.718c0,0-2.364,11.675-2.364,15.566c0,0,0.521,4.864,2.364,0l2.764-10.702c0,0,0.921-0.973,0,7.783c0,2.919-1.321,10.702,2.364,5.838c0,0,2.243-9.729,2.243-12.648c0,0,0.922-1.945,0.922,2.919c0,0-0.922,11.675,1.843,10.702c0.921-0.973,0.921-9.729,1.843-13.621c0,0,0.921-1.945,0.921,2.919c0,2.919,1.8,12.275,2.764,3.892c-0.079-2.746,1.164-8.423,1.843-25.936c0-2.919,1.25-7.7,4.936-13.538c1.843-2.919,13.136-30.098,13.136-39.827c0-3.892,14.844-39.134,14.844-48.863C86.609,118.001,91.359,105.743,87.75,94.917z M212.27,244.259c-1.764-1.75-5.014-9.061-5.936-11.007s-8.315-5.838-8.315-9.729c-2.255-21.044-8.857-49.14-9.778-52.059c-0.922-3.892-4.607-11.676-5.529-15.567c-0.921-8.756-4.606-20.432-6.449-24.323c-1.843-6.811-1.866-10.702-1.866-13.621c-0.229-3.394-0.608-6.364-1.508-8.942c-2.712-7.77-7.14-11.974-11.29-13.435c-1.994-0.67-3.841-0.987-5.571-1.227c-0.298,0.751-0.671,1.629-0.999,2.498c0.086-0.187-0.565,2.076-0.15,7.18c0.543,6.646,2.213,17.229,1.113,22.466c0,9.729,14.845,44.972,14.845,48.863c0,9.729,11.876,40.158,13.719,43.077c3.686,5.838,3.686,10.702,3.686,13.621c1.278,17.513,0.588,19.057,1.509,22.603c1.765,7.983,2.765-0.973,2.765-3.892c0-4.864,0.922-2.919,0.922-2.919c0.921,3.892,1.121,12.648,2.042,13.621c2.765,0.973,1.644-10.702,1.644-10.702c0-4.864,0.921-2.919,0.921-2.919c0,2.919,2.243,12.648,2.243,12.648c3.686,4.864,2.364-2.919,2.364-5.838c-0.922-8.756,0-7.783,0-7.783l2.764,10.702c1.844,4.864,2.164,0,2.164,0c0-3.892-2.164-15.566-2.164-15.566c1.129,1.191,2.521,3.425,3.543,3.851C211.271,246.824,212.724,244.709,212.27,244.259zM154.877,104.026c-0.415-5.103,0.236-7.366,0.15-7.18c0.328-0.87,0.702-1.748,1-2.499c-2.564-0.354-4.857-0.523-6.89-1.344c-1.339-0.541-2.565-1.072-3.689-1.589c-2.915,2.18-9.106,5.815-23.198,5.335c-12.219-0.417-19.671-3.291-23.582-5.427c-1.649,0.771-3.513,1.578-5.637,2.408c-1.654,0.647-3.465,0.73-5.43,0.896c0.078,0.133,0.13,0.233,0.149,0.29c3.609,10.826-1.141,23.084,0.26,31.575c0,0,2.371,17.832,4.741,28.982c4.221-1.504,10.153-3.523,14.706-4.374c4.68-0.875,9.983-1.627,15.293-1.351c7.18,0.373,13.266,1.431,17.996,2.335c3.427,0.655,7.604,1.335,10.58,1.815c1.916-11.175,4.664-27.408,4.664-27.408C157.09,121.256,155.42,110.673,154.877,104.026zM155.328,193.896c-0.922-6.811-6.666-24.579-4.866-34.979c0.254-1.468,0.549-3.182,0.864-5.017c-2.976-0.48-7.153-1.16-10.58-1.815c-4.73-0.904-10.816-1.962-17.996-2.335c-5.31-0.276-10.613,0.476-15.293,1.351c-10.072,1.882-14.755,4.496-14.724,4.394c-0.013,0.038,0.494,2.179,0.805,3.423c2.6,10.399-3.944,28.168-4.866,34.979c-0.088,0.279-0.201,0.859-0.332,1.688c3.913,1.58,16.325,5.753,36.16,4.666c17.666-0.968,27.332-2.77,31.307-3.685C155.611,195.203,155.447,194.274,155.328,193.896zM134.9,85.032c-0.596-0.533-0.982-4.968-1.021-8.421c-0.864,0.812-1.817,1.55-2.885,2.415C127.253,82.06,127.768,84,122.099,84c-5.468,0-5.397-1.788-8.783-4.626c-1.129-0.946-2.029-1.742-2.779-2.514c-0.249,3.256-0.752,7.572-1.437,8.172l-10.432,6.291c3.911,2.136,11.363,5.01,23.582,5.427c14.092,0.48,20.283-3.155,23.198-5.335C137.705,87.858,134.9,85.032,134.9,85.032z"
                "image://"
            ];
            var count = 1;
            var chartData = [];
            var chartLinks = [];
            chartData.push({
                name: '',
                fixed: false,
                draggable: true, // 是否可以拖拽，默认false
                number: 0, // 这是编号 非必须，目的仅为方便编写line
                symbol: symbols[0],
                symbolSize: [60, 160], //图形大小
                value: data,
                x: 100,
                y: 260,
                itemStyle: {
                    normal: {
                        color: '#47b9f9',
                        borderColor: '#156ACF',
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20,
                        borderType: 'dashed'
                    }
                },
                tooltip: {
                    enterable: true,
                    position: "inside",
                    formatter: function (params) { // 区分连线和节点，节点上额外显示其他数字
                        var value = params.data.value;
                        var str = "";
                        for (var key in value) {
                            str += key + ": " + value[key] + "<br>";
                        }
                        return "<div style='max-width: 500px;word-wrap: break-word;white-space: pre-wrap;'>" + str + "</div>";
                    }
                },
            });

            for (var key in data) {
                chartData.push({
                    "name": key,
                    "value": data[key],
                    "number": count
                });
                chartLinks.push({
                    "source": 0,
                    "target": count
                });

                count++;
            }


            var entityDetailChartOption = {

                tooltip: {
                    show: true
                },
                series: [{
                    type: 'graph',
                    layout: 'force',
                    focusNodeAdjacency: false,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                            //color:'auto'
                        }
                    },
                    force: {
                        repulsion: 500
                    },
                    tooltip: {
                        formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
                            if (node.dataType == "node") {
                                return "<div style='max-width: 500px;word-wrap: break-word;white-space: pre-wrap;'>"
                                    + node.data.name + ": " + node.data.value + "</div>";
                            }
                        },
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0,
                            width: 1,
                            curveness: 0
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#053d5e',
                        }
                    },
                    symbol: 'roundRect',
                    draggable: true,
                    symbolSize: function (value, params) {
                        return [params.data.name.length * 15, 30]
                    },
                    data: chartData,
                    links: chartLinks
                }]
            };
            entityDetailChart.setOption(entityDetailChartOption);

            // 使用刚指定的配置项和数据显示图表。
            entityDetailChart.setOption(option);
            window.addEventListener("resize", function () {
                entityDetailChart.resize();
            });
        }
    })
</script>
</body>
</html>